<template>
	<view class="container">
		<u-form :model="form" ref="uForm">
			<u-form>
				<u-form-item label="姓名">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
			</u-form>
			<u-form-item :label-position="labelPosition" label="性别" prop="sex">
				<u-input type="select" :select-open="actionSheetShow" v-model="form.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
				<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
			</u-form-item>
			<u-form>
				<u-form-item label="联系电话">
					<u-input v-model="form.phone" placeholder="请输入电话" />
				</u-form-item>
			</u-form>
			<u-form>
				<u-form-item label="小区名称">
					<u-input v-model="form.phone" placeholder="请输入小区名称" />
				</u-form-item>
			</u-form>
			<u-form>
				<u-form-item label="房屋地址">
					<u-input style="color:#333333" @click="showAddr = true" :value="form.address" placeholder="请选择地址" />
					<u-picker mode="region" v-model="showAddr" :area-code='["21", "2101", "210103"]'
						@confirm='selectAddr'></u-picker>
				</u-form-item>
			</u-form>
			<u-form>
				<u-form-item label="详细地址">
					<u-input v-model="form.cityds" placeholder="请输入详细地址" />
				</u-form-item>
			</u-form>
			<u-button type="success" @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '', //姓名
					sex:'', //性别
					phone:'', //电话
					cityinfo:'',//小区名称
					address: '', //房屋地址
					cityds: '', //详细地址
				},
				labelPosition: 'left',
				actionSheetShow:false,
				showAddr: false,
				showtime: false,
				addrenoyesList: [{
						name: '设计装修',
						id: 1
					},
					{
						name: '自家装修',
						id: 2
					}
				],
				actionSheetList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				addrenoyesListindex: 0,
				tagList: [],
			}
		},
		methods: {
			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.form.sex = this.actionSheetList[index].text;
			},
			selectAddr(e) {
				console.log(e)
				// 点击后获取省市区展现到页面
				this.form.address = `${e.province.label}-${e.city.label}-${e.area.label}`
			},
			// 表单数据
			submit() {
				uni.navigateTo({
					url:"index"
				})
				console.log(JSON.stringify(this.form))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		padding: 0 20rpx;

		/deep/.u-form-item--left {
			flex: none !important;
			width: 180rpx !important;
			font-size: 32rpx;
		}
	}
</style>
